<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>富扬数据看板</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/stylesheets/skins/_all-skins.min.css">
  <style>
    body{
      background-image: url(/images/bg.jpg);
      background-size: cover;
      background-position: center;
      width: 100vw; height: 100vh;
      overflow: hidden;
    }
    .wrap{
      background-color: rgba(27,58,114, 0.5);
    }
    .content{
      padding: 0;
    }
    .content .row{
      margin: 0;
    }
    .content .title{
      display: flex;
      justify-content: center;
    }
    .content .title h1{
      padding: 20px;
      font-style: italic;
      color: rgb(113,243,250);
      margin: 0 0 10px 0;
      background: rgba(27,58,114, 0.7);
    }
    .content .row_box{
      border-radius: 10px;
      position: absolute;
      width: calc( 100% - 30px );
    }
    #staff{
      border-radius: 10px;
      overflow: hidden;
      height: 100%;
    }
    #staff2{
      border-radius: 10px;
      overflow: hidden;
      height: 100%;
    }
    #manager{
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
    }
    #director{
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
    }
    #top_one{
      background-color: rgba(27,58,114, 0.7);
    }
    #top_one h3{
      color: rgb(113,243,250);
      margin: 0 0 10px 0;
      padding-top: 10px;
      text-align: center;
    }
    #top_one .table{
      width: 80%;
      margin: 0 auto;
      color: rgb(113,243,250);
      text-align: center;
      font-size: 18px;
      height: calc( 100% - 50px );
    }
    #top_one .table tr .team{
      font-weight: bold;
    }
    #top_one .table tr .name{
      font-size: 24px;
    }
    #top_one .table tr{
      padding: 10px 0;
    }
    .selectMonth{
      position: absolute;
      left:30px;
      top:50px;
      background: transparent;
      width: 100px;
      border: none;
      outline: none;
      color: rgb(113,243,250);
    }
  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrap">
  <section class="content" style="height: 100vh;">
    <div class="title">
      <h1>富扬销售提成数据</h1>
    </div>
    <select class="selectMonth">
      <option value="1">一月</option>
      <option value="2">二月</option>
      <option value="3">三月</option>
      <option value="4">四月</option>
      <option value="5">五月</option>
      <option value="6">六月</option>
      <option value="7">七月</option>
      <option value="8">八月</option>
      <option value="9">九月</option>
      <option value="10">十月</option>
      <option value="11">十一月</option>
      <option value="12">十二月</option>
    </select>
    <div class="row" style="width: 100%;">
      <div class="col-sm-4" style="height: calc(100vh - 100px);">
        <div id="staff"></div>
      </div>
      <div class="col-sm-4" style="height: calc(100vh - 100px);position: relative;">
        <div class="row_box" id="top_one" style="height: 60%;top:0">
          <h3>各部门Top1</h3>
          <table class="table table-condensed table-hover"></table>
        </div>
        <div class="row_box" style="height: 39%;bottom:0">
          <div id="manager"></div>
        </div>
        <!-- <div class="row_box">
          <div id="director"></div>
        </div> -->
      </div>
      <div class="col-sm-4" style="height: calc(100vh - 100px);">
        <div id="staff2"></div>
      </div>
    </div>
  </section>
</div>

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/adminlte.min.js"></script>
<script src="/javascripts/echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var staffEle = echarts.init(document.getElementById('staff'));
var staffEle2 = echarts.init(document.getElementById('staff2'));
var managerEle = echarts.init(document.getElementById('manager'));
// var directorEle = echarts.init(document.getElementById('director'));

var ws = new WebSocket("ws://106.54.246.120:3000/dashboard");
ws.onmessage = function (evt) {
  let userData = evt.data;
  userData = userData ? JSON.parse(userData) : [];
  const staff = sort(userData.staff, 'count').filter(v=>!v.team?.includes("财务") && !v.name?.includes("奖金池"));;

  const staff1 = staff.slice(0,30);
  const staff2 = staff.slice(30,60);

  const bossData = [...userData.manager, ...userData.boss];

  fn(staffEle, staff1, "员工排名1~30", 74);
  fn(staffEle2, staff2, "员工排名31~60", 74);

  fn(managerEle, bossData, "总经办及部门经理排名", 84);
  // fn(directorEle, userData.boss, "总经办排名");
  getTeamTopOne( userData.staff );
};

$(".selectMonth").val(new Date().getMonth() + 1).change(function(){
  getData($(this).val());
})

function getData(m){
  const ops = {
    url: "/dashboard/getData",
  }
  if( m ){
    ops.data = {
      month: m
    }
  }
  $.ajax(ops).then(userData=>{
    const staff = sort(userData.staff, 'count').filter(v=>!v.team?.includes("财务") && !v.name?.includes("奖金池"));

    const staff1 = staff.slice(0,30);
    const staff2 = staff.slice(30,60);

    const bossData = [...userData.manager, ...userData.boss];

    fn(staffEle, staff1, "员工排名1~30", 74);
    fn(staffEle2, staff2, "员工排名31~60", 74);
    fn(managerEle, bossData, "总经办及部门经理排名", 84);
    // fn(directorEle, userData.boss, "总经办排名");
    getTeamTopOne( userData.staff );
  })
}
getData( new Date().getMonth() + 1 );


function getTeamTopOne( userData ){
  const teamData = [];
  userData.forEach(val=>{
    const index = teamData.findIndex( v=>v.team === val.team )
    if(index === -1){
      teamData.push( {
        team: val.team,
        data: [ val ]
      } );
    }else{
      teamData[index].data.push( val );
    }
  });
  teamData.forEach(val=>{
    let maxData = val.data[0];
    val.data.forEach( v=>{
      if(maxData.count < v.count){
        maxData = v
      }
    } )
    val.maxData = maxData
  });
  const teamSort = "市场部，业务部-1，业务部-2，报价中心，采购部，仓库，供船部，天津富扬，青岛富扬，舟山富扬，广州富扬".split("，");
  let str = '';
  console.log( teamSort, teamData );
  teamSort.map(val=>{
    return {
      team: val,
      name: teamData.find(v=>v.team===val)?.maxData.name || "",
      count: teamData.find(v=>v.team===val)?.maxData.count || ""
    }
  })
  .filter(val=>val.name)
  .forEach(val=>{
    str += `<tr>
              <td class="team" style="width:33%;text-align:left;">${ val.team }</td>
              <td class="name" style="width:33%">${ val.name }</td>
              <td style="width:33%;text-align:right;">${ val.count }</td>
            </tr>`
  })
  $("#top_one .table").html(str);
}

function run(myChart, userData) {
  myChart.setOption({
    series: [{
      type: 'bar',
      data: userData.map(val=>val.count)
    }]
  });
}

function sort(arr, key){
  return [...arr].sort((a,b)=>b[key]-a[key]);
}

function fn(myChart, userData, title, left=50){
  const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  const option = {
    xAxis: {
      show: false,
    },
    yAxis: {
      type: 'category',
      data: userData.map(val=>val.name),
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max: userData.length-1,
      axisLabel: {
        color: "rgb(113,243,250)"
      }
    },
    series: [{
      realtimeSort: true,
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true,
        color: "rgb(113,243,250)"
      },
      itemStyle:{
        color: "rgb(113,243,250)"
      }
    }],
    grid:{
      left: left + "px",
      right: "12%",
      top: "50px",
      bottom: "2%"
    },
    title: {
      text: title,
      left: "center",
      top: 10,
      textStyle: {
        fontSize: 24,
        color: "rgb(113,243,250)"
      },
      show: true
    },
    backgroundColor: "rgba(27,58,114, 0.7)",
    animationDuration: 0,
    animationDurationUpdate: 2000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  run(myChart, userData);
}
</script>
</body>
</html>
